{% extends 'base.html' %}

{% block title %}
    <title>{{ goodsdes.name }} </title>
{% endblock %}

{% block cssjs %}
    <link href="/static/css/goods_des.css" rel="stylesheet" type="text/css">

    <script src="/static/js/goods_list1.js"></script>
    <script src="/static/js/list_magnifier.js"></script>
    <script src="/static/js/goods_info.js"></script>
{% endblock %}


<!--  公共头部  -->
{% block cart %}
    <div class="bag">
        <a href="{% url 'carts:cart' %}">
            <div class="bag_n">
                <img src="/static/img/shopping.png" class="bag_icon" alt="" />
                <span>购物袋（<t style="color: #8E0C3A;" id="all_num">{{ all }}</t>）</span>
                <img class="arrow" src="/static/img/xiabiao.png" alt="" />
            </div>
        </a>

        {% if not cart_data %}
            <div class="cart">
                <div class="cart_n">您的购物车是空的</div>
            </div>
        {% else %}
            <div class="cart">
                <div><h4 class='title'>最新加入的商品</h4></div>
                <p class='new_cart'>有新的商品加入 快去购物车查看吧</p>
            </div>

        {% endif %}
    </div>
{% endblock %}
{% block content %}


<div class="main_nav">
    <div class="nav">
        <ul class="nav_ul">
            <li><a href="{% url 'index:info' %}">{{ goodsindexs.0.0.type }}</a></li>

            {% for goodsindex in goodsindexs.1 %}
                <li><a href="#">{{ goodsindex.type }}</a>
                <div class="goods" style="left:-108px;">
                    <div class="goods_con_left">
                        <div class="goods_left">
                            <dt style="margin-top: 0px;">今日上新</dt>
                            <dt>昨日上新</dt>
                            <dt>本周上新</dt>
                        </div>
                        <div class="goods_mid">
                            <dt style="font-weight: bold;">男仕 Man</dt>
                            <dd>包袋 Bags</dd>
                            <dd>配饰 Accessories</dd>
                            <dd>鞋履 Shoes</dd>
                            <dd>服装 Clothes</dd>
                        </div>
                        <div class="goods_right">
                            <dt style="font-weight: bold;">女士 Woman</dt>
                            <dd>包袋 Bags</dd>
                            <dd>配饰 Accessories</dd>
                            <dd>鞋履 Shoes</dd>
                            <dd>服装 Clothes</dd>
                        </div>
                    </div>
                    <div class="goods_con_right">
                        <dt style="font-weight: bold;">今日推荐单品</dt>
                        <ul>
                            {% for goodslist in goodslists %}
                                <li>
                                    <img src="{{ goodslist.img }}" alt="" style="width: 30px;height: 30px">
                                    <a href="{% url 'goods:goodsdes' goodslist.id %}" style="font-size: 12px">{{ goodslist.name }}</a>
                                    {{ goodslist.des }}
                                </li>
                            {% endfor %}


                        </ul>
                    </div>
                    <div class="all_news">
                        <a href="#">所有男士新品</a>
                        <a href="#">所有女士新品</a>
                    </div>
                </div>
            </li>
            {% endfor %}

            <li class="last_li"><a href="#">{{ goodsindexs.2.0.type }}</a></li>
        </ul>
    </div>
</div>
{% endblock %}

<!-- 内容 -->
{% block main %}
    <div class="content">
			<div class="goods_info">
				<div class="pro_l">
					<div class="pro_img_list">
						<ul class="goods_list">
							{% for goodpicture in goodpictures %}
							    <li><img src="{{ goodpicture.img }}" alt="" class="list_edit"></li>
							{% endfor %}

						</ul>
					</div>
					<div class="pro_img">
						<div class="smallArea"></div>
						<div class="bigArea" >
							<img class="bigImg" src="{{ goodsdes.img }}" alt="" />
						</div>
					</div>	
				</div>

				
				<div class="pro_r">
					<!--品牌以及商品标题-->
					<h1 class="relative">
						 <a class="c_purple" href='' target="_blank" title="了解品牌">{{ goodsdes.name }}</a>
               			 <br />
               			 <span>{{ goodsdes.des }} </span>
					</h1>
					<!--参考价格-->
					<div class="position_rel">
						<div class="pro_price">
							<p>
								<s class="c_gray_2">参考价：￥{{ goodsdes.ori }}</s><br />
								<div style="position:relative;">
									<span class=c_purple>
									<br />
									活动价：<span class="price">￥{{ goodsdes.dis }}</span>
									</span>
								</div>
							</p>
							<div style="margin-top:20px;">
           	             		 <p>
           	             		 	到货时间：{{ goodsdes.time }}
           	             		 </p>
                            </div>
						</div>
					</div>
					<div class="pro_btn">
                        <a href=""><img class="buy" src="{{ goodsdes.buy }}" alt="" /></a>
                        <a href=""><img class="bags" goodsid="{{ goodsdes.id }}" src="{{ goodsdes.bags }}" alt="" /></a>
					</div>
					<div class="pro_con">
						
					</div>
				</div>
			</div>
		</div>
    <script>
    $(function () {
        $('.buy').click(function () {

        });
        $('.bags').click(function () {
            var gid = $(this).attr('goodsid');
            var num = parseInt($('#all_num').text());
            {#alert("商品已加入购物车,请前往购物车结算");#}
            $('#all_num').text(num+1);

            $.ajax({
                url:'{% url "goods:cartdata" %}',
                type:'post',
                data:{'gid':gid},
                dataType:'json',
                headers:{'X-CSRFToken': '{{ csrf_token }}'},
                success:function (data) {
                    console.log(data)
                }
            })
        })
    })
    </script>
{% endblock %}


<!--  公共尾部  -->
{% block help %}
    <div class="help">
				<ul>
					<li class="help_title">购物指南</li>
					<li><a href="">购物流程</a></li>
					<li><a href="">配送方式</a></li>
				</ul>
				<ul>
					<li class="help_title">支付方式</li>
					<li><a href="">如何付款</a></li>
					<li><a href="">发票制度</a></li>
				</ul>
				<ul>
					<li class="help_title">商品说明</li>
					<li><a href="">商品尺码</a></li>
					<li><a href="">商品包装</a></li>
				</ul>
				<ul>
					<li class="help_title">客服中心</li>
					<li><a href="">七天退还</a></li>
					<li><a href="">常见问题</a></li>
				</ul>
				<ul class="help_mid">
					<li style="padding-top: 13px;line-height: 26px;">
						<h5>订购热线</h5>
						<br/>
						<h4>4000-250-630</h4>
					</li>
				</ul>
				<ul class="help_mid" style="width: 145px;">
					<li style="padding-top: 13px;">
						<span>在线客服</span>
						<div class="tel">
							<a href=""><img src="/static/img/tencent.png" alt="" /></a>
							<a href=""><img src="/static/img/erji.png" alt="" /></a>
						</div>
					</li>
				</ul>
				<ul class="help_mid" style="width: 190px;">
					<li class="scan">
						<p>美西时尚APP</p>
						<img src="/static/img/ewm_indexTop.png" alt="" />
					</li>
					<li class="scan" style="width: 72px;">
						<p>关注我们</p>
						<img src="/static/img/ewm_wx.png" style="margin: 0;" alt="" />
					</li>
				</ul>
			</div>
{% endblock %}
{% block links %}
    <div class="links">
				<ul class="clearfix" style="width: 480px;">
					<li><a href="" id="foot_a"></a></li>
					<li><a href="" id="foot_b"></a></li>
					<li class="foot_c"></li>
					<li><a href="" id="foot_d"></a></li>
					<li><a href="" id="foot_e"></a></li>
					<li><a href="" id="foot_f"></a></li>
				</ul>
			</div>
{% endblock %}
